
{% extends 'base/base.html' %}
{% load custom_filters %}

{% block title %}添加话题 - 简易问答平台{% endblock %}

{% block content %}
<div class="row">
    <div class="col-md-8 col-md-offset-2">
        <div class="page-header text-center">
            <h1>添加新话题</h1>
            <p class="lead">创建一个新的话题分类，帮助组织相关问题</p>
        </div>

        <div class="panel panel-default" style="border-radius: 8px; overflow: hidden;">
            <div class="panel-body">
                <form method="post" class="form-horizontal">
                    {% csrf_token %}
                    
                    <!-- 话题名称 -->
                    <div class="form-group">
                        <label for="{{ form.name.id_for_label }}" class="col-sm-2 control-label">话题名称</label>
                        <div class="col-sm-10">
                            <div class="input-group">
                                <div class="input-group-addon">
                                    <i class="glyphicon glyphicon-tag"></i>
                                </div>
                                {{ form.name.errors }}
                                {{ form.name|add_attrs:"class:form-control;placeholder:请输入话题名称;style:font-size:16px;padding:12px" }}
                            </div>
                            <p class="help-block">简洁明了的话题名称有助于用户快速识别</p>
                        </div>
                    </div>
                    
                    <!-- 话题描述 -->
                    <div class="form-group">
                        <label for="{{ form.description.id_for_label }}" class="col-sm-2 control-label">话题描述</label>
                        <div class="col-sm-10">
                            {{ form.description.errors }}
                            {{ form.description|add_attrs:"class:form-control;rows:8;placeholder:请详细描述这个话题的内容和范围，帮助用户了解该话题的主题;style:font-size:15px;line-height:1.6;padding:12px" }}
                            <p class="help-block">详细的描述可以帮助用户了解该话题涵盖的内容</p>
                        </div>
                    </div>
                    
                    <!-- 操作按钮 -->
                    <div class="form-group">
                        <div class="col-sm-offset-2 col-sm-10">
                            <a href="{% url 'main:topic_list' %}" class="btn btn-default btn-lg">
                                <i class="glyphicon glyphicon-arrow-left"></i> 取消
                            </a>
                            <button type="submit" class="btn btn-primary btn-lg pull-right">
                                <i class="glyphicon glyphicon-plus"></i> 添加话题
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
{% endblock %}